const { resolve } = require('path') //引入path模块,并解构resolve
// 引入插件
const HtmlPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin') // 克隆静态资源使用的插件
module.exports = {
  //入口
  entry: './src/index.js', //相对路径,相对的是命令行工具中的路径
  // 出口
  output: {
    filename: './js/app.bundle.js', // 文件名
    path: resolve(__dirname, '../build'), // 打包后的js文件所处的文件夹
    clean: true, //每次编译出新的代码之后,会删除之前编译的代码
  },
  mode: 'production',
  // production 1. 压缩 2. 在硬盘上生成build文件夹 3. 会打包生产环境需要的包
  // development 1. 不会压缩 2. 在内存中生成build 3. 会打包生产和开发都需要的包
  plugins: [
    new HtmlPlugin({
      // 默认情况下,htmlplugin这个插件,会自动在build中生成一个index.html文件.并自动引入打包好的
      // js文件. 但是并不是以我们写的index.html为模板生成

      //定义模板
      template: './public/index.html', //相对的是命令行工具中的路径
    }),

    new CopyPlugin({
      patterns: [
        {
          from: 'public', // 克隆静态资源的起始目录
          to: resolve(__dirname, '../build'), // 克隆静态资源的目标目录
          //   注意: public目录下有index.html文件,但是index.html由htmlplugin处理,copyplugin就不需要处理了,否则会报错. 我们要进行配置,忽略index.html
          globOptions: {
            ignore: ['**/index.html'],
          },
        },
      ],
    }),
  ],
}
